<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

*{
margin:0px;
padding:0px;
}

p{
	text-indent: 2em;
	line-height: 1.3em;
	font-size:13px;	
}

#tablestyle{
	
	border-collapse: collapse;
/* 	padding:0px; */
/* 	border-style: none; */
 	margin:20px; 
	width:80%;
	
}

#tablestyle td{
border: 1px solid gray;
}

#tablestyle input{
	width:100%;
	border:0px;
}

</style>
</head>
<body>
	<div id="all"></div>
	<script type="text/javascript">
	window.onload=function(){
		//以下是测试部分，得出 以下结论：
		//1js中的对象的建立，前面的键名加""，如"userno"实质上相当于不加，故下在的user2本质就是user
		//2虽然js对象看起来与json中的对象的字符串表达方式很像，但实际上还是有区别的，区别就是json中的键名是"userno"
		//3用控制台看变量好
		var user={userno:"x12345",userpwd:"111",userpwdagain:"111",username:"liyi",usersex:"男",userage:"111",userage:"30",useraddress:"三孝口",userprofession:"教师",userinterest:["足球","篮球"]};
		var user2={"userno":"x12345","userpwd":"111","userpwdagain":"111","username":"liyi","usersex":"男","userage":"111","userage":"30","useraddress":"三孝口","userprofession":"教师","userinterest":["足球","篮球"]};
 		//alert(user);//alert(user2)也是一样。无数据显示，只能显示出对象
		console.log(user);console.log(user2);//用控制台比较好
 		var userjson=JSON.stringify(user);
		//alert(userjson);//与userjson2相同，都是标准的json字符串
		var userjson2=JSON.stringify(user2);
		//alert(userjson2);//与userjson相同，都是标准的json字符串
		console.log(userjson);console.log(userjson2);//用控制台比较好
		//上面user和user2转成json字符串是一样的，但user与user2有没有区别呢？
		
		//检查user与user2有没有区别呢?结果是没有什么区别
		//alert(user.userno);alert(user["userno"]);
		//alert(user2.userno);alert(user2["userno"]);
		//检查结束
		
		//以上的测试部分结束
		
		//正式代码开始
		
		var users=[
			{"userno":"x12345","userpwd":"111","userpwdagain":"111","username":"liyi","usersex":"男","userage":"111","userage":"30","useraddress":"三孝口","userprofession":"学生","userinterest":["足球","篮球","电影"],"useremail":"e_liyi@126.com","userphoto":"photo1.jpg","usersummary":"我的情况是这样子的"},
			{"userno":"x12346","userpwd":"111","userpwdagain":"111","username":"liyi","usersex":"男","userage":"111","userage":"30","useraddress":"三孝口","userprofession":"学生","userinterest":["足球","篮球","电影"],"useremail":"e_liyi@126.com","userphoto":"photo1.jpg","usersummary":"我的情况是这样子的"},
			{"userno":"x12347","userpwd":"111","userpwdagain":"111","username":"liyi","usersex":"男","userage":"111","userage":"30","useraddress":"三孝口","userprofession":"学生","userinterest":["足球","篮球","电影"],"useremail":"e_liyi@126.com","userphoto":"photo1.jpg","usersummary":"我的情况是这样子的"}
			];
 		//以下代码，是在已经有的控制上操作，实际上可以在一个div中动态生成代码，然后放在其innerHTML中
		
 		var temp="";
 		temp=temp+"<table id='tablestyle'>";
 		temp=temp+"<tr>";
		temp=temp+"<th>用户号</th><th>用户密码</th>"
		temp=temp+"</tr>";
 		for(var i=0;i<users.length;i++){
 			temp=temp+"<tr>";
 			temp=temp+"<td><input type='text' value='"+users[i].userno+"'></td>"
 			temp=temp+"<td><input type='text' value='"+users[i].userpwd+"'></td>"
 			temp=temp+"</tr>";
 		}
 		temp=temp+"</table>";
//  		form1.userno.value=user.userno;
//  		form1.userprofession.value=user.userprofession;
 		
//  		var userinterests=form1.userinterest;
//  		for(var i=0;i<userinterests.length;i++){//感觉写得不太好
//  			for(var j=0;j<user.userinterest.length;j++){
//  				if(userinterests[i].value==user.userinterest[j]){
//  					userinterests[i].checked=true;
//  				}
//  			}
//  		}
 		
 		document.getElementById("all").innerHTML=temp;
 		
	}
	</script>
	

</body>
</html>